<template>
  <el-card class="form-container">
    <el-form
      ref="addDmsMemberForm"
      :model="formModel"
      size="small"
      label-suffix="："
      label-width="120px"
      :rules="rules"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formModel.username" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formModel.phone" placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item label="姓名" prop="nickName">
        <el-input v-model="formModel.nickName" placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item label="和平台是否存在劳务关系" prop="labourRelationFlag">
        <el-radio-group v-model="formModel.labourRelationFlag">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="组织" prop="organizationCode">
        <el-cascader
          :options="orgList"
          :props="{
            children: 'childs',
            label: 'organizationName',
            value: 'organizationCode',
          }"
          v-model="formModel.organizationCode"
          :show-all-levels="false"
          change-on-select
        />
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="formModel.gender">
          <el-radio :label="0">未知</el-radio>
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="用户来源" prop="sourceType">
        <el-input
          v-model="formModel.sourceType"
          placeholder="请输入"
          clearable
        />
      </el-form-item>

      <el-form-item label="头像">
        <FileUpload v-model="avatar" :max-count="1" />
      </el-form-item>

      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          v-model="formModel.birthday"
          type="date"
          placeholder="请选择"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="medium" @click="handleSubmit"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { httpUmsMemberSaveMember } from "@/api/ums-member";
import { httpOrgListOrg } from "@/api/org";
import { cloneDeep, isArray, isObject } from "lodash";
import FileUpload from "@/components/Upload/index.vue";

export default {
  name: "addMetaProduct",

  components: { FileUpload },

  data() {
    return {
      formModel: {
        // 生日
        birthday: null,
        // 性别：0 ->未知；1->男；2->女
        gender: 0,
        // 0->和平台不存在劳务关系；1->和平台存在劳务关系
        labourRelationFlag: 0,
        // 昵称
        nickName: null,
        // 组织ID
        organizationCode: null,
        // 手机号
        phone: null,
        // 用户来源
        sourceType: null,
        // 用户名
        username: null,
      },

      avatar: "",

      // 组织列表
      orgList: [],

      rules: {
        // birthday: [{required: true, message: '请选择', trigger: 'blur'}],
        nickName: [{ required: true, message: "请输入", trigger: "blur" }],
        gender: [{ required: true, message: "请选择", trigger: "blur" }],
        labourRelationFlag: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        // nickName: [{ required: true, message: "请选择", trigger: "blur" }],
        organizationCode: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入", trigger: "blur" }],
        // sourceType: [{ required: true, message: "请选择", trigger: "blur" }],
        username: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },

  created() {
    this.init();
  },

  methods: {
    /**
     * 初始化页面
     */
    async init() {
      httpOrgListOrg().then((res) => {
        if (res.code === 200) {
          this.orgList = res.data;
        }
      });

      const { data } = this.$route.query;

      if (isObject(data) && typeof data.id === "number") {
        this.formModel = {
          id: data.id,
          birthday: data.birthday,
          gender: data.gender,
          labourRelationFlag: data.labourRelationFlag,
          nickName: data.nickName,
          organizationCode: data.organizationCode,
          phone: data.phone,
          sourceType: data.sourceType,
          username: data.username,
        };

        if (data.icon) {
          this.avatar = data.icon;
        }
      }
    },

    handleSubmit() {
      this.$refs.addDmsMemberForm.validate((valid) => {
        if (valid) {
          const params = cloneDeep(this.formModel);

          if (isArray(params.organizationCode)) {
            params.organizationCode =
              params.organizationCode[params.organizationCode.length - 1];
          }

          params.icon = this.avatar;

          httpUmsMemberSaveMember(params).then(() => {
            this.$router.push({ name: "dmsMember" });
          });
        }
      });
    },
  },
};
</script>

<style></style>
